<template>
	<view>
		<view class="login_title">
			欢迎来到图书坊,请登录
		</view>
		<view class="login_input">
			<view class="login_account">
				<input type="text" placeholder="在此处键入账号" maxlength='18' v-model="email"/>
			</view>
			<view class="login_password">
				<input type="password" placeholder="此处键入密码" maxlength='18' v-model="password" />
			</view>
		</view>
		<u-button text="开始" type='primary' size='default' style="width: 80%;margin-top: 40rpx;":disabled="!loginButton" @click="getLogin"></u-button>
		<view class="others">
			<view @click="changRouter(1)">
				注册
			</view>
			<view>
				忘记密码
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		data() {
			return {
				email:'',
				password:'',
				login:''
			};
		},
		mounted() {
			this.$bus.$on('getLogin',this.getLogin)
		},
		methods:{
			...mapMutations('indexStore',['SETUSERDATA','SETTOKEN']),
			async getLogin(){
				if(uni.$u.test.email(this.email)&&this.password){
					const {email,password} = this
					const {access_token} = await uni.$u.api.reqLoginStatus({email,password})
					access_token ? this.SETTOKEN(access_token) : ""
					uni.navigateBack({
						delta:1
					})
				}
			},
			changRouter(num){
				let url = ''
				if(num == 1){
					url='../register/register'
				}else{
					uni.showToast({
						title:'建设中',
						icon:'none'
					})
					return
				}
			
				uni.navigateTo({url})
			}
		},
		computed:{
			loginButton(){
				return (uni.$u.test.email(this.email)&&this.password)
			},
			
		}
	}
</script>

<style lang="scss">
.login_title{
	width: 100%;
	height: 200rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 40rpx;
	color: #007AFF;
	font-weight: 700;
}
.login_input{
	[class^='login']{
		margin: 0 auto;
		width: 80%;
		height: 90rpx;
		box-shadow: 0 0 10rpx #555555;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		input{
			height: 100%;
			width: 100%;
			padding-left: 20rpx;
		}
	}
}
.others{
	display: flex;
	justify-content: space-between;
	padding: 30rpx 90rpx;
}
</style>
